<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div>
      前端学习基本上存在浏览器和开发工具即可 浏览器使用chrome 开发工具使用
      vscode 免费开源跨平台（后盾人已经录制视频） 用到后台服务器时使用
      wamp、xampp、mamp根据自己的操作系统选择（后盾人已经录制视频） #chrome
      chrome是google推出的市场占有率最高的浏览器。因为chrome是开源的所以我们用的很多国内浏览器都是基于
      chrome开发的。 查看源码
      通过查看其他网站源码有助于新手学习，同时有些HTML是后台脚本如PHP渲染出来的，通过查看源码可以帮助我们分析问题。
      image-20190725125429044 控制台
      console是使用最多的调试功能，在html/css/js都会使用到
      image-20190725125609883 #基础知识 HTML 不是一种编程语言，而是一种标记语言
      (markup language)，是网页制作所必备的。用于按不同标签声明网页中的内容。
      通过下图我们可以看到，一个网页是由很多区域组合构成的，即使用HTML标签布局。
      image-20190725115528125 #文件命名 使用小写字线命名文件，不要出现中文字符
      扩展名标准是.html，当然也可以使用.htm 多个单词可以使用- 或 _
      连接，建议使用- 字符如user-create.html #URL
      统一资源定位符，用于表示资源在网络上的地址，每个部分以/进行分隔。
      http资源访问 https://www.houdunren.com/edu/front/lesson/298.html
      FTP文件下载 ftp://ftp.houdunren.com/download/php.pdf MAILTO邮箱地址
      mailto:2300071698@qq.com 参数说明 参数说明 https访问协议
      http或https、ftp、mailto www.houdunren.com服务器地址
      edu/front/lesson资源目录 298.html文件名 #访问路径 #绝对路径
      绝对路径包含主机+服务器地址+目录+文件名的完整路径
      https://www.houdunren.com/edu/front/lesson/298.html #相对路径
      相对路径是指相对当前目录的地址 # 当前目录的文件 2.html # 上级目录中的文件
    </div>
    <label> <input type="checkbox" disabled="sdklsdklsdkl" /> 接受协议 </label>
    <style>
      div {
        width: 400px;
        height: 200px;
        overflow-y: auto;
      }
    </style>

    <script>
      const div = document.querySelector("div");
      div.addEventListener("scroll", function () {
        //console.log(this.scrollHeight);
        //console.log(this.offsetHeight);
        //console.log(parseInt(window.getComputedStyle(div).height));
        //console.log(this.scrollTop);

        let { scrollHeight, offsetHeight, scrollTop } = this;
        console.log(scrollTop + offsetHeight, scrollHeight);
        let state = scrollTop + offsetHeight >= scrollHeight - 200;
        if (state) {
          document.querySelector("input").removeAttribute("disabled");
        }
      });
    </script>
  </body>
</html>
